import React, { useState, useEffect } from 'react'
import { NavBar, List, Card, Image, Tag, SpinLoading, Empty, InfiniteScroll } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { getFollowedDoctorList, type FollowedDoctorItem } from '../../api/doctor'
import './index.css'

const FollowedDoctors: React.FC = () => {
  const navigate = useNavigate()
  const [doctors, setDoctors] = useState<FollowedDoctorItem[]>([])
  const [loading, setLoading] = useState(false)
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(1)

  const fetchDoctors = async (pageNum: number = 1, append: boolean = false) => {
    if (loading) return
    
    setLoading(true)
    try {
      const response = await getFollowedDoctorList(pageNum, 10)
      if (response.status === '0000') {
        const newDoctors = response.result || []
        if (append) {
          setDoctors(prev => [...prev, ...newDoctors])
        } else {
          setDoctors(newDoctors)
        }
        setHasMore(newDoctors.length === 10)
      } else {
        if (!append) {
          setDoctors([])
        }
        setHasMore(false)
      }
    } catch (error) {
      console.error('获取关注医生列表失败:', error)
      if (!append) {
        setDoctors([])
      }
      setHasMore(false)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchDoctors(1, false)
  }, [])

  const loadMore = async () => {
    if (!hasMore || loading) return
    
    const nextPage = page + 1
    setPage(nextPage)
    await fetchDoctors(nextPage, true)
  }

  const goToDoctorDetail = (doctorId: number) => {
    navigate(`/doctor-detail/${doctorId}`)
  }

  const back = () => {
    navigate(-1)
  }

  return (
    <div className="followed-doctors-container">
      <NavBar onBack={back}>我的关注</NavBar>
      
      <div className="content">
        {loading && doctors.length === 0 ? (
          <div className="loading-container">
            <SpinLoading color="primary" />
            <div className="loading-text">加载中...</div>
          </div>
        ) : doctors.length === 0 ? (
          <Empty description="暂无关注的医生" />
        ) : (
          <List>
            {doctors.map((doctor) => (
              <List.Item
                key={doctor.id}
                onClick={() => goToDoctorDetail(doctor.doctorId)}
                className="doctor-item"
              >
                <Card className="doctor-card">
                  <div className="doctor-info">
                    <div className="doctor-avatar">
                      <Image
                        src={doctor.imagePic || 'https://via.placeholder.com/60x60'}
                        width={60}
                        height={60}
                        fit="cover"
                        style={{ borderRadius: '50%' }}
                      />
                    </div>
                    <div className="doctor-details">
                      <div className="doctor-name">{doctor.name}</div>
                      <div className="doctor-title">{doctor.jobTitle}</div>
                      <div className="doctor-hospital">{doctor.inauguralHospital}</div>
                      <div className="doctor-department">
                        <Tag color="primary" fill="outline" size="small">
                          {doctor.departmentName}
                        </Tag>
                      </div>
                    </div>
                    <div className="doctor-stats">
                      <div className="stat-item">
                        <div className="stat-number">{doctor.praiseNum}</div>
                        <div className="stat-label">好评</div>
                      </div>
                      <div className="stat-item">
                        <div className="stat-number">{doctor.number}</div>
                        <div className="stat-label">服务患者</div>
                      </div>
                    </div>
                  </div>
                </Card>
              </List.Item>
            ))}
          </List>
        )}
        
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    </div>
  )
}

export default FollowedDoctors

